<template>
  <div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="房间状态">
          <el-select v-model="formInline.status" placeholder="房间状态">
            <el-option label="空闲" value="1"></el-option>
            <el-option label="已入住" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间类型">
          <el-select v-model="selected" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.rt_id"
              :label="item.typeName"
              :value="item.rt_id"
            ></el-option>
          </el-select>
          
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <section class="from-btns">
      <el-button type="primary" @click="addRoom">新增房间</el-button>
      <!-- <el-button @click="test">测试</el-button> -->
    </section>
    <br />
    <!-- 表格渲染 -->
    <el-table
      border
      :fit="true"
      ref="roomData"
      max-height="700"
      style="width: 100%"
      :data="roomData"
    >
      <template slot="name" slot-scope="text, record">
        <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
      </template>
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="room_id" label="用户ID"></el-table-column>
      <el-table-column prop="rt_id" label="房间类型"  :formatter="rt_id"></el-table-column>
      <el-table-column prop="roomstatus" label="房间状态"  :formatter="status"></el-table-column>
      <el-table-column prop="bedNum" label="房间床位"></el-table-column>
      <el-table-column fixed="right" label="操作" width="120">
        <template slot="name" slot-scope="text, record">
          <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
        </template>

        <template slot-scope="scope">
          <el-button @click="handleEdit(scope.$index,scope.row)" type="text" size="small">修改</el-button>
          <!-- <el-button @click="handleDelete(scope.$index,scope.row)" type="text" size="small">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增 弹出框 -->
    <el-dialog :title="dialogTitle" :visible.sync="roomDialogVisible" center width="20%">
      <el-form :model="addInfo" label-width="60px" ref="addInfo">
        <el-form-item label="房号" prop="roomNo">
          <el-input v-model="addInfo.room_id" placeholder="请输入房号" style="width:218px"></el-input>
        </el-form-item>
        <el-form-item label="房型">
          <el-select v-model="addInline.rt_id">
            <el-option
              v-for="item in options"
              :key="item.rt_id"
              :label="item.typeName"
              :value="item.rt_id"
            ></el-option>
          </el-select>
          
        </el-form-item>
        <el-form-item label="床位" prop="roomPrice">
          <el-input v-model="addInfo.bedNum" placeholder="请输入床位" style="width:218px"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="addInline.status" placeholder="房间状态">
            <el-option label="空闲" value="1"></el-option>
          </el-select>
         
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roomDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRoom(addInfo)">保存</el-button>
      </span>
    </el-dialog>
    <!-- 修改房间类型 弹出框 -->
    <el-dialog :title="dialogTitle1" :visible.sync="roomDialogVisible1" center width="20%">
      <el-form :model="updateInfo" label-width="60px" ref="updateInfo">
        <el-form-item label="房号" prop="roomNo">
          <el-input v-model="updateInfo.room_id" placeholder="请输入房号" style="width:218px"></el-input>
        </el-form-item>
        <el-form-item label="房型">
          <el-select v-model="updateInline.rt_id">
            <el-option
              v-for="item in options"
              :key="item.rt_id"
              :label="item.typeName"
              :value="item.rt_id"
            ></el-option>
          </el-select>
          
        </el-form-item>
        <el-form-item label="床位" prop="roomPrice">
          <el-input
            v-model="updateInfo.bedNum"
            placeholder="请输入床位"
            style="width:218px"
            readonly="updateInfo.bedNum"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="updateInline.status" placeholder="房间状态">
            <el-option label="空闲" value="1"></el-option>
            <el-option label="已入住" value="0"></el-option>
          </el-select>
     
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="roomDialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="updateRoom(updateInfo)">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRoom,
  insertRoom,
  deleteRoom,
  updateRoom,
  isRoomNoExists
} from "./apis";
export default {
  data() {
    var isExist = (rule, value, callback) => {
      if (this.currentRoomNo === this.roomInfo.room_id) {
        callback();
      }
      isRoomNoExists(value).then(res => {
        if (res.data === true) {
          callback(new Error("该房号已存在！"));
        } else {
          callback();
        }
      });
    };
    var validPrice = (rule, value, callback) => {
      let reg = /^[0-9]*$/;
      if (!reg.test(value)) {
        callback(new Error("请输入数字值"));
      } else {
        callback();
      }
    };
    return {
      isbed: -1,
      dialogTitle: "新增房间",
      dialogTitle1: "修改房间类型",
      roomDialogVisible: false,
      roomDialogVisible1: false,
      editRoom: 0,
      currentRoomNo: "",
      updateInfo: {
        id: "",
        room_id: "",
        rt_id: "",
        bedNum: "",
        status: ""
      },
      addInfo: {
        id: "",
        room_id: "",
        rt_id: "",
        bedNum: "",
        status: ""
      },
      roomInfo: {
        id: "",
        room_id: "",
        rt_id: "",
        bedNum: "",
        status: ""
      },

      selected: "",
      roomData: [],
      options: [],
      updateInline: {},
      addInline: {},
      formInline: {
        status: "",
        typeName: "",
        options: { typeName: "", rt_id: "" }
      }
    };
  },
  mounted() {
    // this.options.push({ typeName: "情侣双人房", rt_id: "4" });
    console.log(this.a);
    console.log(this.selected);
    this.formInline.rt_id = this.selected;

    console.log(this.formInline);

    this.$axios
      .get("ssms/admin/roomType/getAllRoomType", {
        params: {}
      })
      .then(response => {
        console.log(response);
        // this.options.typeName = response.obj.typeName;
        // this.options.rt_id = response.obj.rt_id;
        // response.obj  //array
        this.options.push(...response.data.obj);

        console.log(this.options);
      })
      .catch(function(error) {
        console.log(error);
      });
  },
  methods: {
    handleEdit(index, row) {
      console.log(row);
      if (row.status == 1) {
        // row.roomstatus = "空闲";
        // return row.roomstatus;
        this.updateInline.status = "空闲";
      } else if (row.status == 0) {
        this.updateInline.status = "已入住";
      }
      // this.updateInline.status = 2;
      console.log(this.updateInline.status);
      this.roomDialogVisible1 = true;
      // _this.currentRoomNo = row.room_id;
      this.updateInfo.id = row.id;
      this.updateInfo.room_id = row.room_id;
      this.updateInfo.rt_id = row.rt_id;
      this.updateInfo.bedNum = row.bedNum;
      // _this.roomInfo.status = 0;
      this.editRoom = 1;
    },
    addRoom() {
      var _this = this;
      _this.dialogTitle = "新增房间";
      _this.roomDialogVisible = true;
      this.editRoom = 0;
      console.log(this.editRoom);
      _this.currentRoomNo = "";
      _this.addInfo.room_id = "";
      _this.addInfo.rt_id = "0";
      _this.addInfo.bedNum = 1;
      _this.addInfo.status = 1;
      this.isbed = 1;
    },
    handleDelete(index, row) {
     console.log(row);
    },
    updateRoom(formName) {
      console.log(formName);
      console.log(this.updateInline);
      console.log(this.formInline);
      var a = parseInt(formName.room_id);
      
      this.$axios
        .post("ssms/admin/room/updateRoomType", {
          room_id: formName.room_id,
          rt_id: this.updateInline.rt_id
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            alert("修改成功,请刷新");
          } else {
            alert("修改失败");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    saveRoom(formName) {
      console.log(formName);
console.log(this.addInline.rt_id);
      var data = JSON.stringify(formName);
      var a = parseInt(formName.room_id);

      // console.log(typeof a);
      // console.log(data);
      // console.log(a);

      this.$axios
        .post("ssms/admin/room/addRoom", {
          room_id: a,
          rt_id: this.addInline.rt_id,
          bedNum: formName.bedNum
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            alert("添加成功");
            this.roomDialogVisible=false;
          } else {
            alert("添加失败");
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    test() {
      // this.$axios
      //   .get("ssms/admin/roomType/getAllRoomType", {
      //     params: {}
      //   })
      //   .then(response => {
      //     console.log(response);
      //     // this.options.typeName = response.obj.typeName;
      //     // this.options.rt_id = response.obj.rt_id;
      //     // response.obj  //array
      //     var arr = [1, 2, 3, 4];
      //     response.data.obj.forEach(function(val, index, arr) {

      //       this.options.push({
      //         typeName: response[index].typeName,
      //         rt_id: response[index].rt_id
      //       });

      //       arr[index] = 2 * val;
      //     });
      //     console.log(
      //         "  typeName: " +
      //           this.options[index].typeName +
      //           "  rt_id: " +
      //           this.options[index].rt_id
      //       );
      //     console.log(arr);
      //     console.log(this.options);
      //   })
      //   .catch(function(error) {
      //     console.log(error);
      //   });
      this.$axios
        .get("ssms/admin/roomType/getAllRoomType", {
          params: {}
        })
        .then(response => {
          console.log(response);
          // this.options.typeName = response.obj.typeName;
          // this.options.rt_id = response.obj.rt_id;
          // response.obj  //array
          this.options.push(...response.data.obj);

          console.log(this.options);
        })
        .catch(function(error) {
          console.log(error);
        });
    },

    rt_id(row) {
      if (row.rt_id == 1) {
        row.type = "双人房";
        return row.type;
      } else if (row.rt_id == 2) {
        row.type = "单人房";
        return row.type;
      } else if (row.rt_id == 3) {
        row.type = "大床房";
        return row.type;
      }
    },
    status(row) {
      if (row.status == 1) {
        row.roomstatus = "空闲";
        return row.roomstatus;
      } else if (row.status == 0) {
        row.roomstatus = "已入住";
        return row.roomstatus;
      }
    },
    search() {
      this.getRoom();
    },
    getRoom() {
      this.roomData = [];
      var data = JSON.stringify(this.formInline);
      console.log(data);
      this.$axios({
        method: "POST",
        url: "/ssms/admin/room/getRoomBtStatusRt_id",
        headers: {
          "Content-Type": "application/json"
        },
        responseType: "application/json",
        data: data
        // emailCode:this.formInline.emailCode
      })
        .then(response => {
          console.log(response.data);
          if (response.data.code === 0) {
            this.roomData = response.data.obj;
            console.log(this.roomData);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    onSubmit() {
      // this.options.push({ typeName: "情侣双人房", rt_id: "4" });
      console.log(this.a);
      console.log(this.selected);
      this.formInline.rt_id = this.selected;

      console.log(this.formInline);
      this.getRoom();
    }
  }
};
</script>